<template>
  <div class="home">
    <div class="menu">
      <div class="menu-box" @click="index">教师首页</div>
      <div class="menu-box" @click="student">学生管理</div>
      <div class="menu-box" @click="course">课程管理</div>
      <div class="menu-box" @click="work">作业管理</div>
      <div class="menu-box" style="border-bottom: 0;" @click="score">评分管理</div>
    </div>
    <div class="main">
       <router-view></router-view>
    </div>
  </div>
</template>
<script setup>
import { RouterView } from 'vue-router';
import { useRouter } from 'vue-router';

const router=useRouter()
const index=()=>{
  console.log("点击了首页")
  router.push('/te-home')
}
const student=()=>{
  console.log("点击了学生管理")
  router.push('/te-home/studentManage')
}
const course=()=>{
  console.log("点击了课程管理")
  router.push('/te-home/courseManage')
}
const work=()=>{
  console.log("点击了作业管理")
  router.push('/te-home/workManage')
}
const score=()=>{
  console.log("点击了评分管理")
  router.push('/te-home/scoreManage')
}
</script>

<style scoped>
.home{
  /* position: absolute; */
  width: 90%;
  height: 90%;
  /* background-color: rgb(167, 81, 75); */
  margin: 1% 5% 0 5%;
  display: flex;
}
.menu{
  width: 8%;
  height: 40%;
  background-color: rgba(244, 242, 242, 0.55);
  /* border: 1.5px solid #DCDFE6; */
  float: left;
  border-radius:8px;
  box-shadow: var(--el-box-shadow-light);
}
.menu-box{
  width: 100%;
  height: 19.8%;
  /* background-color: blueviolet; */
  border-bottom: 1.5px solid #DCDFE6;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.menu-box:hover{
  background-color: #DCDFE6;
}
.main{
  width: 90.76%;
  height: 100%;
  /* background-color: aqua; */
  margin-left: 1%;
  /* position: ; */
  /* float: left; */
  /* display: inline-block; */
}
</style>